<template>
    <a-modal :title="formRelation.title" :width="1200" :confirmLoading="submitLoading" :visible="formRelation.visible" :footer="null" @cancel="close">
      <a-card title="仅支持xls、xlsx格式，文件大小不超过10MB" style="margin-bottom:10px">
        <a-form-model :label-col="{ span: 8 }"
    :wrapper-col="{ span: 8 }" :model="formRelation" ref="formRelation">
          <a-form-model-item label="结算账单名称" prop="name" :rules="[{ required: true, message: '请填写结算账单名称!' }]">
            <a-input v-model="formRelation.name"></a-input>
          </a-form-model-item>
           <a-form-model-item label="结算人员">
             <input v-show="false" ref="fileRef" type="file" @change="fileChange">
            <a-button icon="upload" type="primary" @click="uploadFile">上传结算/预览</a-button>
            <p v-if="formRelation.fileName" style="margin-top:15px;margin-bottom:0;"><a-icon type="paper-clip" style="margin-right: 10px;"></a-icon>{{formRelation.fileName}}</p>
          </a-form-model-item>
        </a-form-model>
      </a-card>
      <a-card title="结算名单" style="margin-bottom:10px" v-if="total > 0">
        <template #extra><a-button type="primary" @click="submitTaskTemp">提交结算</a-button></template>
        <a-table 
        :columns="table.columns" 
        :pagination="table.pagination" 
        rowKey="idCard" 
        :data-source="table.loadData">
        </a-table>
      </a-card>
      <a-card title="友情提示">
        <template #extra><a-button icon="download" @click="downTaskTemp" class="ant-btn-warning">下载线下结算模板</a-button></template>
        <div>
          <p>1、请下载标准的结算模板</p>
          <p>2、线下结算数据只会出现在结算账单列表中、不走任务流程</p>
          <p>3、有错误信息不能提交结算</p>
        </div>
      </a-card>
    </a-modal>
</template>
<script>

import { mapGetters } from 'vuex'
import store from '@/store'
import { 
    allImportOfflineTaskSttlePerson,
    allOfflineTaskSttlePersonSubmit
} from '@/api/manage/task'
import { 
    COLUMNS_OFFLINE_SETTLE
} from './form'

export default {
  name: 'taskOffineSettle',
  data () {
    return {
        formRelation:{
            title:'导入线下结算模板',
            name:'',
            visible:false
        },
        table:{
          columns:COLUMNS_OFFLINE_SETTLE,
          loadData:[],
          pagination:{
            current:1,
            pageSize: 5,
            total:0,
            showSizeChanger: false,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        },
        taskId:'',
        fileName:'',
        batchCode:'',
        total:0,
        errTotal:0,
        succTotal:0,
        submitLoading:false
    }
  },
  methods:{
    add(item){
        this.taskId = item.taskId;
        this.fileName = '';
        this.total = 0;
        this.succTotal = 0;
        this.errTotal = 0;
        this.batchCode ='';
        this.formRelation.name = '';
        this.formRelation.visible = true;
    },
    async downTaskTemp(){
        await store.dispatch('allGetOfflineTaskSttleTemp');
    },
    uploadFile(){
        if(!this.formRelation.name){
            return this.$message.error('请填写结算账单名称！');
        }
        this.$refs.fileRef.click();
    },
    async fileChange(e) {
       const file = e.target.files[0];
        const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isExcel) {
            e.target.value = '';
            this.$message.error('只能上传后缀 xlsx、xls格式!');
            return
        }
        const isLt1m = file.size / 1024 / 1024 < 10;
        if (!isLt1m) {
            e.target.value = '';
            this.$message.error("文件不得大于10MB!");
            return false;
        }
        let formData = new FormData();
        formData.append("file",file);
        formData.append('taskId',this.taskId);
        formData.append('name',this.formRelation.name);
        e.target.value = '';
        const {code,data} = await allImportOfflineTaskSttlePerson(formData);
        if(code === '1'){
            this.formRelation.fileName = file.name;
            this.table.loadData = data.list;
            this.table.pagination.total = data.total;
            this.total = data.total;
            this.batchCode = data.batchCode;
        }
    },
    async submitTaskTemp() {
        let that = this;
        let params = {batchCode:this.batchCode}
        this.submitLoading = true;
        const {code} = await allOfflineTaskSttlePersonSubmit(params);
        this.submitLoading = false;
        if(code === '1'){
            this.$confirm({
                title: '操作成功',
                content: '结算账单已生成',
                okText:'去查看',
                cancelText:'关闭',
                onOk() {
                    that.formRelation.visible = false;
                    that.$router.push({name:'applicationSettleBillCode'});
                },
                onCancel() {
                    that.formRelation.visible = false;
                    that.$emit("on-ok");
                },
            });
        }
    },
    close(){
        let that = this;
        this.$confirm({
            title: '温馨提示',
            content: '关闭后，当前数据全部清空，是否关闭',
            okText:'关闭',
            onOk() {
                that.formRelation.visible = false;
            },
            onCancel() {
            },
        });
    }
  }
}
</script>
